<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		body{background:#000;}
		canvas{
			border:3px solid green;
			/* background:red; */
			display:block;
			margin:0px auto;
		}	


	</style>
</head>
<body>
	<canvas id="mycanvas" width="600" height="600">
		你的浏览器不支持 canvas
	</canvas>


	<script>
		var Canvas = document.getElementById('mycanvas');	
		// 2d 的绘制环境
		var cxt = Canvas.getContext('2d');


		// 画表
		function myClock(){

			// 开始清楚画布的所有内容
			cxt.clearRect(0,0,Canvas.width,Canvas.height);

			// 获取时间对象
			var myDate = new Date();
		
			// 获取 分钟
			var ii = myDate.getMinutes();
			// 获取小时
			var h24 = myDate.getHours()+ii/60;
			// 三元运算
			var h = h24>12?h24-12:h24;
			// 获取 秒
			var s = myDate.getSeconds();



			// 绘制 分 刻度
			cxt.save();
			cxt.lineWidth = 5;
			cxt.strokeStyle = 'pink';
			// 把坐标系平移到表盘的圆心位置
			cxt.translate(300,300);
			// 旋转  时刻度
			for(var i=0;i<60;i++){
				cxt.rotate(Math.PI/180*6);
				cxt.beginPath();
				cxt.moveTo(0,-230);
				cxt.lineTo(0,-250);
				cxt.stroke();
			}
			// 恢复保存前的状态
			cxt.restore();

			// 绘制 时 刻度
			cxt.save();
			cxt.lineWidth = 15;
			cxt.strokeStyle = 'green';
			// 把坐标系平移到表盘的圆心位置
			cxt.translate(300,300);
			// 旋转  时刻度
			// 循环 时 刻度
			for(var i=0;i<12;i++){
				cxt.rotate(Math.PI/180*30);
				cxt.beginPath();
				cxt.moveTo(0,-210);
				cxt.lineTo(0,-250);
				cxt.stroke();
			}
			// 恢复保存前的状态
			cxt.restore();

			// 绘制表盘
			cxt.save();
			cxt.lineWidth = 10;
			cxt.strokeStyle = 'yellow';
			cxt.beginPath();
			cxt.arc(300,300,250,0,Math.PI/180*360,false);
			cxt.stroke();
			cxt.restore();


			// 绘制 时 指针
			cxt.save();
			// 把坐标系平移到表盘的圆心位置
			cxt.translate(300,300);	
			cxt.rotate(Math.PI/180*(h/12)*360);		
			cxt.strokeStyle = 'green';
			cxt.lineWidth = 15;
			cxt.beginPath();
			cxt.moveTo(0,30);
			cxt.lineTo(0,-150);
			cxt.stroke();
			cxt.restore();

			//  分  指针
			cxt.save();
			// 把坐标系平移到表盘的圆心位置
			cxt.translate(300,300);			
			cxt.rotate(Math.PI/180*(ii/60)*360);
			cxt.strokeStyle = 'pink';
			cxt.lineWidth = 10;
			cxt.beginPath();
			cxt.moveTo(0,30);
			cxt.lineTo(0,-200);
			cxt.stroke();
			cxt.restore();

			//  秒  指针
			cxt.save();
			// 把坐标系平移到表盘的圆心位置
			cxt.translate(300,300);			
			cxt.rotate(Math.PI/180*(s/60)*360);
			cxt.strokeStyle = 'red';
			cxt.lineWidth = 5;
			cxt.beginPath();
			cxt.moveTo(0,30);
			cxt.lineTo(0,-230);
			cxt.stroke();
			cxt.restore();			

			// 绘制表盘的圆心
			cxt.save();
			cxt.strokeStyle = '#09c';
			cxt.lineWidth = 10;
			cxt.fillStyle = 'yellow';
			cxt.beginPath();
			cxt.arc(300,300,10,0,Math.PI/180*360,false);
			cxt.fill();
			cxt.stroke();
			cxt.restore();	

		}

		myClock();

		setInterval(myClock, 1000);

	</script>

</body>
</html>